<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>


<%-- <link rel="stylesheet" href="${basePath}/static/plugins/treeview/bootstrap-treeview.css">
<link rel="stylesheet" href="${basePath}/static/plugins/layer/skin/layer.css"> --%>
<link rel="stylesheet" href="${basePath}/static/plugins/uploadify/uploadify.css">
<style type="text/css">
	
		.error-border{
			border:1px solid red;
			border-color:red;
		}

</style>
<script type="text/javascript">
	var uploadPath = "${uploadPath}";
</script>
<section class="content-header">
	<ol class="breadcrumb">
		<li><i class="fa fa-dashboard"></i>系统设置</li>
		<li class="active">模板管理</li>
	</ol>
</section>
<div class="content">
	<div class="row">
		<div class="col-md-6">
			<div class="nav-tabs-custom" style="min-height: 500px">
				<!-- Tabs within a box -->
				<ul class="nav nav-tabs ui-sortable-handle" id="navTab">
					<c:forEach items="${list}" var="item" varStatus="ind">
								<li 
									<c:if test="${ind.index==0}">
										class="active"
									</c:if>
								>
									<a href="#template-info${item.id}" data-toggle="tab">${item.typeName}</a>
								</li>
					</c:forEach>
				</ul>
				<div class="tab-content no-padding" id="tabContent">
					<!-- Morris chart - Sales -->
					<c:forEach items="${list}" var="item" varStatus="ind">
							<div class="tab-pane 
									<c:if test="${ind.index==0}">
										active
									</c:if>
									" id="template-info${item.id}" data-typeId="${item.id}">
								<div class="row">
									<div class="col-md-12">
										<div class="box-body">
                							<c:set value="${map[item.id]}" var="temps"></c:set>
						                    <div id="template-body" class="template-body">
						                    	<table class="table table-bordered table-hover text-center">
						                    		<thead>
						                    			<tr style="cursor:pointer;">
						                    				<th>模板名称</th>
						                    				<th>模板介绍</th>
						                    			</tr>
						                    		</thead>
						                    		<tbody>
						                    			<c:forEach items="${temps}" var="temp">
							                    			<tr style="cursor:pointer;" class="template-tr" data-tempId="${temp.id}" data-type="${temp.type}" data-disabled="${temp.disabled}" data-url="${temp.fileName}">
								                    			<td>${temp.templateName}</td>
							                    				<td>${temp.descript}</td>
								                    		</tr>
						                    			</c:forEach>
						                    			
						                    		</tbody>
						                    	</table>
						                    </div>
						                </div>
									</div>
									
								</div>
							</div>
					</c:forEach>
					
				</div>
			</div>
		</div>
		
		<div class="col-md-6">
			<div class="box box-solid" style="min-height: 500px">
				<div class="box-header with-border">
					<h3 class="box-title">模板详细</h3>

					<div class="box-tools">
						<button type="button" class="btn btn-box-tool" id="templateAdd">
							<i class="fa fa-plus-square"></i>
						</button>
						<!-- <button type="button" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button> -->
					</div>
				</div>
                
                <div class="box-body">
                
                    <div>
                    	<form id="template-detail">
                    		<input type="hidden" name="id"/> 
                    		<input type="hidden" name="type"/> 
	                    	<div class="row" style="margin-top:20px;padding-left:20px;">
								<div class="form-group form-inline col-sm-5">
							    	<label class="">模板名称：</label>
						     		<input class="form-control" type="text" name="templateName" value="" placeholder="请输入模板名称">
									<div style="margin-top:20px;">
										<label>是否开启提醒：</label>
										<input type="checkbox" name="disabled" value="1">
									</div>
						   		</div>
						   		<div class="form-group form-inline col-sm-7">
							    	<label  class="">模板介绍：</label>
						     		<textarea class="form-control" name="descript" placeholder="请输入模板介绍"></textarea>
						   		</div>
							</div>
	                    	<div class="row" style="margin-top:20px;padding-left:20px;">
								<div class="form-group form-inline col-sm-4" id="uploadRow">
									<button id="uploadBtn"></button>
									<button class="btn btn-danger" id="delTemplateFile" style="border-radius:15px;width:120px;">删除模板</button>
									<input type="hidden" name="fileName" id="templateFileName">
							    	<!-- <label class="">上传模板：</label>
						     		<input class="form-control" type="file" id="templateFile" name="file" value="" placeholder="请输入模板名称"> -->
						   		</div>
						   		<div class="form-group form-inline col-sm-8">
						   			<img src="" id="templateImage" alt="当前无模板"
						   				style="max-width:80%;min-width:100px;max-height:500px;">
						   		</div>
							</div>
							<div style="width:100%;text-align:center">
								<button class="btn btn-warning" id="saveTemplate" style="width:120px;margin-top:30px;">保存</button>
								<button class="btn btn-danger" id="delTemplate"  style="width:120px;margin-top:30px;display:none;">删除</button>
							</div>
						</form>
                    </div>
					
                </div>
            </div>
		</div>
		
	</div>
</div>
<script type="text/javascript" src="${basePath}/static/plugins/jquery.validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="${basePath}/static/plugins/uploadify/jquery.uploadify.min.js"></script>
<script src="${basePath}/static/adminLTE/js/human/template.js"></script>
